<template>
	<view class="content">
		<view class="website-con">
			<view class="website-title">特约网点服务商</view>
			<view class="website-text">
				特约网点服务商是平台挑选出优秀的精选师傅，要求师傅有专业的安装维修技能，能提供优质的上门服务，接收平台的管理
				整的同时平台对师傅政策上区域保护，让师傅订单更稳定，收入得到保障！
			</view>
		</view>
		<view class="website-con" style="margin-top: 23rpx;">
			<view class="website-title">特约网点服务商权益</view>
			<view class="website-text">
				<view>1、享受区域保护，一口价订单平台指派；</view>
				<view>2、抢单优先、报价单优先雇佣；</view>
				<view>3、专属区域客服经理一对一；</view>
				<view>4、批量工程单优先雇佣；</view>
			</view>
		</view>
		<view class="website-con" style="margin-top: 23rpx;">
			<view class="website-title">我要加盟的品类选择：<text style="color: #999999;">(可多选)</text></view>
			<view class="type-con">
				<view class="type-list" :class="item.checked?'active':''" v-for="(item,index) in typeList" :key="index"
					@click="changeType(item)">
					{{item.title}}
				</view>
			</view>
			<view class="website-input">
				<view>从事安装维修年限</view>
				<view style="margin-left: auto;">
					<u--input placeholder="请输入年限" inputAlign="right" fontSize="27rpx" border="none"
						v-model="year"></u--input>
				</view>
				<view>年</view>
			</view>
			<u-line color="#F0F0F0"></u-line>
			<view class="website-input">
				<view>平台需要您缴纳保证金</view>
				<view style="margin-left: auto;">
					<u-radio-group v-model="bond" placement="row">
						<u-radio label="可以" name="可以" labelSize="27rpx" labelColor="#000000" iconSize="20rpx"></u-radio>
						<u-radio label="不可以" name="不可以" labelSize="27rpx" labelColor="#000000"
							iconSize="20rpx"></u-radio>
					</u-radio-group>
				</view>

			</view>
			<u-line color="#F0F0F0"></u-line>
			<view class="website-input">
				<view>每日可接最大单量</view>
				<view style="margin-left: auto;">
					<u--input placeholder="请输入可接单量" inputAlign="right" fontSize="27rpx" border="none"
						v-model="maxCount"></u--input>
				</view>
				<view>单</view>
			</view>
			<u-line color="#F0F0F0"></u-line>
			<view class="website-input">
				<view>是否接受平台派单价格</view>
				<view style="margin-left: auto;">
					<u-radio-group v-model="pai" placement="row">
						<u-radio label="可以" name="可以" labelSize="27rpx" labelColor="#000000" iconSize="20rpx"></u-radio>
						<u-radio label="先了解" name="先了解" labelSize="27rpx" labelColor="#000000"
							iconSize="20rpx"></u-radio>
					</u-radio-group>
				</view>

			</view>
			<u-line color="#F0F0F0"></u-line>
			<view class="website-input">
				<view>团队人数</view>
				<view style="margin-left: auto;">
					<u--input placeholder="请输入团队人数" inputAlign="right" fontSize="27rpx" border="none"
						v-model="people"></u--input>
				</view>
				<view>人</view>
			</view>
			<u-line color="#F0F0F0"></u-line>
			<view class="website-input">
				<view>我的网点名称</view>
				<view style="margin-left: auto;">
					<u--input placeholder="请输入网点名称" inputAlign="right" fontSize="27rpx" border="none"
						v-model="name"></u--input>
				</view>

			</view>
		</view>
		<view class="detail-but">
			<view style="width: 688rpx;">
				<u-button type="primary" shape="circle" text="提交申请" @click="submitForm"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		categoryApi,
		joinApi
	} from '@/api/user'
	export default {
		data() {
			return {
				typeList: [],
				year: '',
				bond: "可以",
				maxCount: "",
				pai: "可以",
				people: "",
				name: "",
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await categoryApi({
					pid: 0
				})
				const arr = res.data
				if (arr.length) {
					arr.forEach((row) => {
						row.checked = false
					})
				}
				this.typeList = arr
				console.log(this.typeList);
			},

			changeType(item) {
				item.checked = !item.checked
			},
			async submitForm() {
				const arr = []
				this.typeList.forEach((row) => {
					if (row.checked) {
						arr.push(row.title)
					}
				})
				if (!arr.length) {
					uni.$u.toast('请选择品类')
					return
				}
				if (!this.year) {
					uni.$u.toast('请输入年限')
					return
				}
				if (!this.maxCount) {
					uni.$u.toast('请输入可接单量')
					return
				}
				if (!this.people) {
					uni.$u.toast('请输入团队人数')
					return
				}
				if (!this.name) {
					uni.$u.toast('请输入网点名称')
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				const res = await joinApi({
					type: arr.join(','),
					year: this.year,
					bond: this.bond,
					maxCount: this.maxCount,
					pai: this.pai,
					rules: this.rules,
					people: this.people,
					name: this.name,
					rules: "可以"
				})
				uni.hideLoading()
				uni.showToast({
					title: '提交成功等待审核'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 23rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 140rpx) !important;
	}

	.website-con {
		width: 688rpx;
		padding: 23rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

	}

	.website-title {

		font-size: 31rpx;
		color: #000000;

	}

	.website-text {
		margin-top: 15rpx;
		text-align: justify;
		line-height: 38rpx;
		font-size: 27rpx;
		color: #FAC10D;
	}

	.type-con {
		margin-left: -15rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		font-size: 23rpx;
		color: #000000;
	}

	.type-list {
		flex-shrink: 0;
		padding: 6rpx 15rpx;
		border-radius: 23rpx;
		border: 1px solid #E6E6E6;
		margin-left: 15rpx;
		margin-top: 15rpx;
	}

	.active {
		background: #0277DE;
		border: none;
		color: #FFFFFF;
		border: 1px solid #0277DE;
	}

	.website-input {
		padding: 29rpx 0;
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #000000;

		& ::v-deep .u-input {
			padding: 0 9px !important;
		}

		& ::v-deep .u-radio {
			margin-right: 23rpx;
		}

		& ::v-deep .u-radio:last-child {
			margin-right: 0;
		}

		& ::v-deep .u-radio__icon-wrap--circle {
			width: 31rpx !important;
			height: 31rpx !important;
		}
	}
</style>